<template>
  <view class="container">
    <ve-alert class="alert">
      <text class="title">押金金额说明：</text>
      <text class="content">还车后从租车押金中转{{ codeInfo.illegalDeposit }}元至违章押金，剩余可退。</text>
    </ve-alert>
    <view class="card" style="padding-bottom: 16rpx">
      <view class="card-title"><text class="title">承租人信息</text></view>
      <view class="line"></view>
      <view class="deposit-item">
        <view class="deposit-item-label">承租人姓名</view>
        <view class="deposit-item-content">{{ codeInfo.memberName }}</view>
      </view>
      <view class="deposit-item">
        <view class="deposit-item-label">承租人手机号</view>
        <view class="deposit-item-content">{{ codeInfo.memberPhone }}</view>
      </view>
    </view>
    <view class="card">
      <view class="card-title">
        <text class="title">需授权押金</text>
        <text class="extra">{{ codeInfo.carDeposit }}元</text>
      </view>
      <view class="line"></view>
      <view class="deposit-item">
        <view class="deposit-item-label">租车押金</view>
        <view class="deposit-item-content">
          <text>{{ codeInfo.carDeposit }} 元</text>
          <view class="edit-button" @click="editDepositClick('carDeposit')">
            <ve-icon class="icon" name="edit" size="32"></ve-icon>
            <text>修改金额</text>
          </view>
        </view>
      </view>
      <view class="deposit-item">
        <view class="deposit-item-label">违章押金</view>
        <view class="deposit-item-content">
          <text>{{ codeInfo.illegalDeposit }} 元</text>
          <view class="edit-button" @click="editDepositClick('illegalDeposit')">
            <ve-icon class="icon" name="edit" size="32"></ve-icon>
            <text>修改金额</text>
          </view>
        </view>
      </view>
      <!-- 二维码区域 -->
      <block v-if="showScanCode">
        <view class="line"></view>
        <view class="scan-code" v-if="!imgUrlFetching">
          <view class="scan-code-title">
            <view>({{ epName }}-支付宝免押)请将下面二维码</view>
            <view>发给客户使用支付宝扫描进行免押</view>
          </view>
          <view class="scan-code-content">
            <image :src="codeInfo.aliCodeUrl" mode="widthFix"></image>
          </view>
        </view>
        <view class="scan-code-loading" v-else>
          <uni-load-more :iconSize="24" iconType="snow" status="loading" :contentText="{ contentrefresh: '二维码加载中...' }" />
        </view>
      </block>
    </view>
    <!-- 修改费用 -->
    <ve-modal
      :title="editFeeModalConfig.title"
      cancelText="取消"
      v-model="editFeeModalConfig.visible"
      @confirm="editFeeModalConfig.onConfirm"
      @close="editFeeModalConfig.onClose"
      :okLoading="editFeeModalConfig.okLoading"
    >
      <view class="modal-content">
        <view class="modal-tips">{{ editFeeModalConfig.subTitle }}</view>
        <view class="line"></view>
        <ve-form-item label="修改为" unit="元">
          <ve-input-number v-model="editFeeModalConfig.amount" :max="99999999.99" :precision="2" />
        </ve-form-item>
      </view>
    </ve-modal>

    <!-- 截屏画布 -->
    <l-painter style="width: 400rpx" ref="painter" hidden />

    <ve-bottom-box size="mini" v-if="showScanCode && !imgUrlFetching">
      <ve-button type="primary" size="long" @click="onShootClick">一键截屏</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup>
  import { ref, reactive, computed } from 'vue'
  import { userStore } from '@/stores'
  import { changeDepositAmount } from '@/api/order/sOrder'
  const props = defineProps({
    // 免押码信息
    codeInfo: {
      type: Object,
      default: () => {},
    },
    // 图片加载中
    imgUrlFetching: Boolean,
  })
  const emits = defineEmits(['update:codeInfo'])
  //商户简称
  const userInfoStore = userStore()
  const epName = computed(() => {
    return userInfoStore.enterpriseDetail.briefName
  })
  // 修改押金金额 option
  const editFeeModalConfig = reactive({
    title: '修改租车押金',
    subTitle: '',
    visible: false,
    amount: '',
    type: '',
    onConfirm: () => {
      if (editFeeModalConfig.amount || editFeeModalConfig.amount === 0) {
        const param = {
          id: props.codeInfo.id, // 订单id
          depositType: editFeeModalConfig.type == 'carDeposit' ? 1 : 2, // 押金类型
          depositAmount: editFeeModalConfig.amount, // 押金金额
        }
        editFeeModalConfig.okLoading = true
        changeDepositAmount(param)
          .then(() => {
            editFeeModalConfig.visible = false
            // 更新押金金额
            emits('update:codeInfo', {
              ...props.codeInfo,
              [editFeeModalConfig.type]: editFeeModalConfig.amount,
            })
            uni.showToast({
              title: '修改成功',
              icon: 'none',
            })
            editFeeModalConfig.amount = ''
          })
          .finally(() => {
            editFeeModalConfig.okLoading = false
          })
      } else {
        uni.showToast({
          title: '请输入押金金额',
          icon: 'none',
        })
      }
    },
    onClose: () => {
      editFeeModalConfig.amount = ''
    },
    okLoading: false,
  })
  // 编辑押金金额
  const editDepositClick = (type) => {
    editFeeModalConfig.visible = true
    editFeeModalConfig.type = type
    if (type === 'carDeposit') {
      editFeeModalConfig.title = '修改租车押金'
      editFeeModalConfig.subTitle = `原租车押金：${props.codeInfo[type]} 元`
    } else {
      editFeeModalConfig.title = '修改违章押金'
      editFeeModalConfig.subTitle = `原违章押金：${props.codeInfo[type]} 元`
    }
  }
  // 是否显示二维码区域
  const showScanCode = computed(() => {
    const { carDeposit, illegalDeposit } = props.codeInfo
    // 押金金额修改时，二维码屏蔽
    if (editFeeModalConfig.visible) {
      return false
    }
    // 需授权金额为0时，二维码屏蔽
    if (carDeposit == 0) {
      return false
    }
    // 租车押金小于违章押金，二维码屏蔽
    if (carDeposit < illegalDeposit) {
      return false
    }
    return true
  })
  // 点击截屏
  const painter = ref()
  const onShootClick = () => {
    // 渲染
    const jsonSchema = {
      css: {
        width: '550rpx',
      },
      views: [
        {
          type: 'view',
          css: {
            background: '#ffffff',
            padding: '56rpx 0 46rpx',
            textAlign: 'center',
          },
          views: [
            {
              type: 'view',
              css: {
                paddingBottom: '20rpx',
                display: 'block',
                textAlign: 'center',
              },
              views: [
                {
                  type: 'text',
                  text: '承租人姓名：' + props.codeInfo.memberName,
                  css: {
                    color: '#191c27',
                    display: 'block',
                  },
                },
                {
                  type: 'text',
                  text: '承租人手机号：' + props.codeInfo.memberPhone,
                  css: {
                    color: '#191c27',
                    display: 'block',
                  },
                },
                {
                  type: 'text',
                  text: '需授权押金：' + props.codeInfo.carDeposit + '元',
                  css: {
                    color: '#191c27',
                    display: 'block',
                  },
                },
                {
                  type: 'text',
                  text: '租车押金：' + props.codeInfo.carDeposit + '元',
                  css: {
                    color: '#191c27',
                    display: 'block',
                  },
                },
                {
                  type: 'text',
                  text: '违章押金：' + props.codeInfo.illegalDeposit + '元',
                  css: {
                    color: '#191c27',
                    display: 'block',
                  },
                },
              ],
            },
            {
              type: 'view',
              css: {
                padding: '20rpx 0 0 20rpx',
                display: 'block',
              },
              views: [
                {
                  type: 'text',
                  text: `(${epName.value}-支付宝免押)请将下面二维码`,
                  css: {
                    color: '#1890ff',
                    display: 'block',
                  },
                },
                {
                  type: 'text',
                  text: '发给客户使用支付宝扫描进行免押',
                  css: {
                    color: '#1890ff',
                    display: 'block',
                  },
                },
              ],
            },
            {
              type: 'image',
              src: props.codeInfo.aliCodeUrl,
              css: {
                width: '240rpx',
                height: '240rpx',
                objectFit: 'contain',
              },
            },
          ],
        },
      ],
    }
    painter.value.render(jsonSchema)
    // 生成图片
    painter.value.canvasToTempFilePathSync({
      fileType: 'jpg',
      pathType: 'url',
      quality: 1,
      success: (res) => {
        const tempFilePath = res.tempFilePath
        // #ifdef H5
        const link = document.createElement('a')
        link.href = tempFilePath
        link.download = 'free_deposit_code.jpg'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        uni.showToast({
          title: '保存成功',
        })
        // #endif
        // #ifdef APP-PLUS
        uni.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success: function () {
            uni.showToast({
              title: '已保存至相册',
            })
          },
          fail: function (fail) {
            uni.showToast({
              title: fail.errMsg.includes('Permission') ? '无相册访问权限，无法保存，请手动开启相册访问权限' : '保存失败',
              icon: 'none',
            })
          },
        })
        // #endif
      },
    })
  }
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
    box-sizing: border-box;
    .alert {
      .title {
        color: #1890ff;
      }
      .content {
        color: #1d2129;
      }
    }
    .card {
      padding: 32rpx 24rpx 40rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-top: 24rpx;
      .card-title {
        display: flex;
        justify-content: space-between;
        line-height: 44rpx;
        font-weight: 600;
        margin-bottom: 32rpx;
        .title {
          font-size: 32rpx;
          color: #191c27;
        }
        .extra {
          font-size: 30rpx;
          color: #3072f6;
        }
      }
      .deposit-item {
        padding: 16rpx 0;
        font-size: 30rpx;
        line-height: 44rpx;
        display: flex;
        .deposit-item-label {
          width: 200rpx;
          color: #8491a8;
        }
        .deposit-item-content {
          display: flex;
          color: #191c27;
          text {
            width: 170rpx;
          }
          .edit-button {
            display: flex;
            align-items: center;
            margin-left: 24rpx;
            line-height: 44rpx;

            font-size: 28rpx;
            color: #3072f6;
            .icon {
              margin-right: 4rpx;
            }
          }
        }
      }
      .scan-code {
        .scan-code-title {
          font-size: 28rpx;
          color: #1890ff;
          line-height: 40rpx;
          text-align: center;
        }
        .scan-code-content {
          text-align: center;
          margin-top: 10rpx;
          image {
            width: 240rpx;
          }
        }
      }
    }
    .line {
      margin: 16rpx 0;
      width: 100%;
      height: 2rpx;
      background: rgba(216, 216, 216, 0.3);
    }
    .modal-content {
      .line {
        margin-top: 32rpx;
        margin-bottom: 0;
      }
      .modal-tips {
        width: 100%;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        color: #3072f6;
        text-align: center;
      }
    }
  }
  .scan-code-loading {
    height: 330rpx;
    padding-top: 140rpx;
  }

  #footer-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
</style>
